import Vue from 'vue'
import App from './App.vue'
/**
 * 定义全局自定义指令
 * 参数1：自定义指令的名称
 * 参数2：自定义指令的配置对象
 */
Vue.directive('waterMark',{
    bind(el,bindings){
        //创建画布
        let canvas=document.createElement("canvas")
        //设置画布宽和高
        canvas.width=250
        canvas.height=150
        //获取画布的上下文对象
        let cxt=canvas.getContext('2d')
        //设置颜色
        cxt.fillStyle=bindings.value.color||"rgba(108,108,108,.3)"
        //设置文字的字体
        cxt.font="18px 微软雅黑"
        //设置角度
        cxt.rotate(20*Math.PI/180)
        //绘制文字
        cxt.fillText(bindings.value.content,canvas.width/10,canvas.height/2)
        el.style.backgroundImage=`url(${canvas.toDataURL("image/png")})`
        el.appendChild(canvas)
    }
})

new Vue({
    render:h=>h(App)
}).$mount("#app")
